﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PaginaPrincipalBT.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.PaginaPrincipalBT" %>
<!DOCTYPE html>

<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>Bold, Bright Bootstrap Template</title>
		<meta name="generator" content="Bootply" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link href="Content/bootstrap.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link href="Content/stylesPrincipal.css" rel="stylesheet">
        <link href="Content/Carousel.css" rel="stylesheet">
        <script type ="text/javascript">

            // VARIABLES GLOBALES JAVASCRIPT
            var geocoder; var marker; var latLng; var latLng2; var map;
            var infowindow; var marcadores = []; var miPos;
            var markerInicial; var myRadius;
            var draw_circle = null; var newinfowindow;


            google.maps.visualRefresh = true;

            // INICiALIZACION DE MAPA

            function initialize() {
           
                latLng = new google.maps.LatLng(-34.907, -56.157);
                var myOptions =
                {
                    zoom: 15,
                    center: latLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        
                ObtenerPosicion();
                Buscar();


}
function ObtenerPosicion() {
    var options = {
        enableHighAccuracy: true,
        timeout: 45000
    };
    navigator.geolocation.getCurrentPosition(GetPosition, funcionError, options);
    function GetPosition(posicion) {
        miPos = posicion.coords;

       
        latLng = new google.maps.LatLng(miPos.latitude, miPos.longitude);

        var pinShadow = new google.maps.MarkerImage('<%=ResolveUrl("~/Imagenes/markerPerson.png") %>',
        new google.maps.Size(150, 150),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));


        // CREACION DEL MARCADOR  
        markerInicial = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: false,
            icon: pinShadow
        });
        alert("pasotodo" + latLng);

        map.setCenter(latLng);

        if (!newinfowindow) {
            newinfowindow = new google.maps.InfoWindow();
        }
         newinfowindow.setContent("<div style='width: 100px; height: 20px;'> <strong>Usted está aquí</strong><div>");
         newinfowindow.open(map, markerInicial);
         alert("pasotodo"); 

    }
    function funcionError(error) {
        alert(error.message);
    }
}

function BuscarFiltro(){
    var filtro = "";
    filtro = $("#inputsearch").val();
    var param = "{'filtro':" + JSON.stringify(filtro) + "}";
       
    $.ajax({
        type: "POST",
        url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/BusquedaComerciosPrincipal") %>',
        data: param,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            jQuery.each(data, function (index, item) {
                items = item;
                /*if (item.length > 0)
                {
                    $("#result_count").text(item.length  +" comercio/s encontrado/s");
                }
                else
                {
                    $("#result_count").text("No se encontraron resultados");

                }*/
                ArmarMapa(item);
            });
        },
        error: SetTabSessionValueFailed
    });
}

function Buscar() {
    $.ajax({
        type: "POST",
        url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/BusquedaCercanos") %>',
        //  data: param,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            jQuery.each(data, function (index, item) {
                ArmarMapa(item);
            });
        },
        error: SetTabSessionValueFailed
    });

}
function ArmarMapa(item) {
var ltlng = [];
    for (var i = 0; i < marcadores.length; i++) {
        marcadores[i].setMap(null); //Remove the marker from the map
    }
    for (i = 0; i < item.length; i++) {
        ltlng.push(new google.maps.LatLng(item[i].Latitud, item[i].Longitud));
    }
    var contador = 0;
    for (var i = 0; i <= ltlng.length; i++) {
        if (calcDistance(markerInicial.getPosition(), ltlng[i]) < 2000){ //metros   $('#search_radius').val() * 100) {
            contador++;
            marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: ltlng[i]
            });
            (function (i, marker) {
                //Aca armo info de los comercios
                google.maps.event.addListener(marker, 'click', function () {
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }
                    infowindow.setContent("Nombre: " + item[i].ComercioNombre + "<br/> Dirección: " + item[i].ComercioDireccion + "<br/> Tel:" + item[i].ComercioTelefono);

                    infowindow.open(map, marker);
                });

            })(i, marker);
            marcadores.push(marker);
        }

        /*  if (contador > 0) {
              $("#result_count").text(contador + " comercio/s encontrado/s");
          }
          else {
              $("#result_count").text("No se encontraron resultados");
  
          }*/
    }
}
function SetTabSessionValueFailed() {
    alert('call failed');
}
function calcDistance(fromLatng, toLatng) {
    return google.maps.geometry.spherical.computeDistanceBetween(fromLatng, toLatng);
}
</script>
	</head>
	<body onload="initialize();">
<!-- Wraps all page content here -->
<div id="wrap">
 
 <header class="masthead">
      <div class="navbar-wrapper" >
 <div class="container" >
        <div class="navbar navbar-inverse navbar-stsatic-top" role="navigation" id="navbarbuscar">
          <form class="navbar-form"  style="margin-right:0px;margin-left:0px;">
            <button type="button" onclick="BuscarFiltro();" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> 
            <input onkeypress="BuscarFiltro();" placeholder="¿Que estás buscando? Ingrese el nombre de un producto, comercio, rubro o tag!" type="search" class="form-control pull-left" id="inputsearch" style="margin-right:0px;margin-left:0px;"> 
          </form>
        </div>
       </div>
          <div class="pull-right  hidden-xs">    
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><h3><i class="glyphicon glyphicon-cog"></i></h3></a>
          <ul class="dropdown-menu">
              <li><a href="#"><i class="glyphicon glyphicon-user"></i> Iniciar sesión</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Cerrar sesión</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Ajustes</a></li>
          </ul>
        </div>
    </div>
     <!-- Carousel
    ================================================== -->
     <div id="map-canvas"></div>
	</header>  
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-justified">
          <li class="active"><a href="#">Principal</a></li>
          <li><a href="<%= Page.ResolveUrl("~/BusquedaComerciosGeoreferenciado.aspx") %>">Posición</a></li>
          <li><a href="<%= Page.ResolveUrl("~/BusquedaComercios.aspx") %>">Busqueda ampliada</a></li>
          <li><a href="<%= Page.ResolveUrl("~/BusquedaComerciosCercanos.aspx") %>">Cercanos</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container -->   
</div><!--/.navbar -->
  
<!-- Begin page content -->
<div class="divider" id="section1"></div>
  
<div class="container">
  <div class="col-sm-10 col-sm-offset-1">
    <div class="page-header text-center">
      <h1>¿Que es la guía digital georeferenciada?</h1>
    </div>
    
    <p class="lead text-center">
      Una nueva forma de ubicar los comercios que necesitas
    </p>
    <p class="text-center">
    blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  
        blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  
        blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  blablabla  
    </p>
  </div>
</div>
    
<div class="divider" id="section2"></div>
  
<section class="bg-1">
  <div class="col-sm-6 col-sm-offset-3 text-center"><h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Try and Tweak Different Layouts</h2></div>
</section>
  
<div class="divider"></div>
   
<div class="container" id="section3">
  	<div class="col-sm-8 col-sm-offset-2 text-center">
      <h1>Mobile-first + Responsive</h1>
      
      <p>
      Instead of creating a unique version of the webpage for each desktop, mobile &amp; tablet, you can now create one design that works on all devices, browsers &amp; resolutions. Your designs will be future ready when a new table or phone size comes in the market, your designs will adapt itself and fit to the new screen size.
      </p>
      
      <hr>
      
      <img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
      
      <hr>
  	</div><!--/col-->
</div><!--/container-->

<div class="divider"></div>
  
<section class="bg-3" id="section4">
  <div class="col-sm-6 col-sm-offset-3 text-center"><h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Leverage Snippets &amp; Examples</h2></div>
</section>
  
<div class="continer bg-4">
	<div class="row">
	   <div class="col-sm-4 col-xs-6">
      
        <div class="panel panel-default">
          <div><img src="//placehold.it/450X250/565656/eee" class="img-responsive"></div>
          <div class="panel-body">
            <p class="lead">Hacker News</p>
            <p>120k Followers, 900 Posts</p>
            
            <p>
              <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
            </p>
          </div>
        </div><!--/panel-->
      </div><!--/col-->
      
      <div class="col-sm-4 col-xs-6">
      
      	<div class="panel panel-default">
          <div class="panel-thumbnail"><img src="//placehold.it/450X250/ffcc33/444" class="img-responsive"></div>
          <div class="panel-body">
            <p class="lead">Bootstrap Templates</p>
            <p>902 Followers, 88 Posts</p>
            
            <p>
              <img src="https://lh5.googleusercontent.com/-AQznZjgfM3E/AAAAAAAAAAI/AAAAAAAAABA/WEPOnkQS_20/s28-c-k-no/photo.jpg" width="28px" height="28px">
            </p>
          </div>
        </div><!--/panel--> 
      </div><!--/col-->
      
      <div class="col-sm-4 col-xs-6">
      
      	<div class="panel panel-default">
          <div class="panel-thumbnail"><img src="//placehold.it/450X250/f16251/444" class="img-responsive"></div>
          <div class="panel-body">
            <p class="lead">Social Media</p>
            <p>19k Followers, 789 Posts</p>
            
            <p>
              <img src="https://lh4.googleusercontent.com/-eSs1F2O7N1A/AAAAAAAAAAI/AAAAAAAAAAA/caHwQFv2RqI/s28-c-k-no/photo.jpg" width="28px" height="28px">
              <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
            </p>
          </div>
        </div><!--/panel--> 

      </div><!--/col--> 
	</div><!--/row-->
</div><!--/container-->

<div class="divider" id="section5"></div>

<div class="row">

  <h1 class="text-center">Where In The World?</h1>

  
  <hr>
  
  <div class="col-sm-8">
      
      <div class="row form-group">
        <div class="col-xs-3">
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
        </div>
        <div class="col-xs-3">
          <input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
        </div>
        <div class="col-xs-4">
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
        </div>
      </div>
      <div class="row form-group">
          <div class="col-xs-5">
          <input type="email" class="form-control" name="email" placeholder="Email" required="">
          </div>
          <div class="col-xs-5">
          <input type="email" class="form-control" name="phone" placeholder="Phone" required="">
          </div>
      </div>
      <div class="row form-group">
          <div class="col-xs-10">
          <input type="homepage" class="form-control" placeholder="Website URL" required="">
          </div>
      </div>
      <div class="row form-group">
          <div class="col-xs-10">
            <button class="btn btn-default pull-right">Contact Us</button>
          </div>
      </div>
    
  </div>
  <div class="col-sm-3 pull-right">

      <address>
        <strong>Iatek, LLC.</strong><br>
        795 Folsom Ave, Suite 600<br>
        Newport, RI 94107<br>
        P: (123) 456-7890
      </address>
    
      <address>
        <strong>Email Us</strong><br>
        <a href="mailto:#">first.last@example.com</a>
      </address>          
  </div>
  
</div><!--/row-->

<div class="container">
  	<div class="col-sm-8 col-sm-offset-2 text-center">
      <h2>Beautiful Bootstrap Templates</h2>
      
      <hr>
      <h4>
        We love templates. We love Bootstrap.
      </h4>
      <p>Get more free templates like this at the <a href="http://bootply.com">Bootstrap Playground</a>, Bootply.</p>
      <hr>
      <ul class="list-inline center-block">
        <li><a href="http://facebook.com/bootply"><img src="/assets/example/soc_fb.png"></a></li>
        <li><a href="http://twitter.com/bootply"><img src="/assets/example/soc_tw.png"></a></li>
        <li><a href="http://google.com/+bootply"><img src="/assets/example/soc_gplus.png"></a></li>
        <li><a href="http://pinterest.com/in1"><img src="/assets/example/soc_pin.png"></a></li>
      </ul>
      
  	</div><!--/col-->
</div><!--/c            ontainer-->
  
</div><!--/wrap-->

<div id="footer">
  <div class="container">
    <p class="text-muted">This Bootstrap Example courtesy <a href="http://www.bootply.com">Bootply.com</a></p>
  </div>
</div>

<ul class="nav pull-right scroll-top">
  <li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
</ul>

	<!-- script references -->
		
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script src="Content/bootstrap.min.js"></script>
		<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
      <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>   
		<script src="Content/scriptsPrincipal.js"></script>
         

	</body>
</html>